//
//  SwiftUIView_Background_Overlay.swift
//  SwiftUIPractice
//
//  Created by 今天下了雨 (external - Project) on 2024/8/19.
//

import SwiftUI

struct SwiftUIView_Background_Overlay: View {
    var body: some View {
     
        // 如何理解 background, 这个东西里面是能够添加其他东西的的
//        Text("Hello, World!")
//            .frame(width: 100, height: 100)
//            .background(Circle().fill(.blue))
//            .frame(width: 120, height: 120)  //代码一行一行往下写, 视图一层一层往里面堆,
//            .background(Circle().fill(.red))

        //针对上面那行代码的写法, 这次我们使用 background 作为主角,来换一种写法
        //就是把 frame 这种代码, 剪切 复制 到background 里面
//        Text("Hello, World!")
//            .background(Circle().fill(.blue).frame(width: 100, height: 100))
//            .background(Circle().fill(.red).frame(width: 120, height: 120))
        
        //尝试 使用其他颜色
//        Text("Hello,  oint: .trailing)).frame(width: 120, height: 120))

        
        //  所以, 这个 background 是背景,越是添加,就越往后面堆叠, Overlay是前景, 越是添加就越往前面走
//        Circle()
//            .fill(.pink)
//            .frame(width: 100, height: 100)
//            .overlay(Text("武").font(.largeTitle).foregroundStyle(.white))
//            .background(Circle().fill(.purple).frame(width: 110, height: 110))
        
        
        
//        Rectangle()
//            .frame(width: 100, height: 100)
//            .overlay(
//                Rectangle().fill(.blue).frame(width: 50, height: 50)
//                , alignment: .topLeading
//            )
//            .background(
//                Rectangle().fill(.red).frame(width: 150, height: 150)
//                , alignment: .bottomTrailing
//            )
        
        //这是一个堆叠的示例代码
        Image(systemName: "heart.fill")
            .font(.system(size: 40))
            .foregroundStyle(.white)
            .background(
                Circle()
                    .fill(
                        LinearGradient(
                            gradient: Gradient(colors: [Color.red, Color.cyan]),
                            startPoint: .leading,
                            endPoint: .trailing)
                    )
                    .frame(width: 100, height: 100)
                    .shadow(color: .yellow, radius: 10, x: 0.0, y: 10)
                    .overlay(
                        Circle().fill(.blue)
                            .frame(width: 35 , height: 35)
                            .overlay(
                                Text("5").font(.headline).foregroundStyle(.white)
                            )
                            .shadow(color: .red, radius: 10, x: 5, y: 5)
                        ,alignment: .bottomTrailing)
            )
    }
}

#Preview {
    SwiftUIView_Background_Overlay()
}
